﻿@page "/components"
@inject IStringLocalizer<Coms> Localizer

<div class="coms-search">
    <div class="row">
        <div class="col-12">
            <Search PlaceHolder="@Localizer["Search"]" IsOnInputTrigger="true" IsAutoFocus="true"
                    Items="@ComponentItems" IsLikeMatch="true" IgnoreCase="true" OnSearch="@OnSearch"></Search>
        </div>
    </div>
    <div class="coms-search-filter">
    </div>
</div>

<CascadingValue Value="ComponentItems" IsFixed="true">
    <CascadingValue Value="@SearchText">

        <ComponentCategory Text="@Localizer["Text1"]">
            <ComponentCard Text="@Localizer["DividerText"]" Image="Divider.svg" Url="divider"></ComponentCard>
            <ComponentCard Text="@Localizer["LayoutText"]" Image="Layout.svg" Url="layout"></ComponentCard>
            <ComponentCard Text="@Localizer["FooterText"]" Image="Footer.jpg" Url="footer"></ComponentCard>
            <ComponentCard Text="@Localizer["RowText"]" Image="Row.jpg" Url="row"></ComponentCard>
            <ComponentCard Text="@Localizer["ScrollText"]" Image="Scroll.png" Url="scroll"></ComponentCard>
            <ComponentCard Text="@Localizer["SkeletonText"]" Image="Skeleton.png" Url="skeleton"></ComponentCard>
            <ComponentCard Text="@Localizer["SplitText"]" Image="Split.png" Url="split"></ComponentCard>
        </ComponentCategory>

        <ComponentCategory Text="@Localizer["Text2"]">
            <ComponentCard Text="@Localizer["AnchorText"]" Image="Anchor.png" Url="anchor"></ComponentCard>
            <ComponentCard Text="@Localizer["AnchorLinkText"]" Image="AnchorLink.jpg" Url="anchor-link"></ComponentCard>
            <ComponentCard Text="@Localizer["BreadcrumbText"]" Image="Breadcrumb.png" Url="breadcrumb"></ComponentCard>
            <ComponentCard Text="@Localizer["DropdownText"]" Image="Dropdown.svg" Url="dropdown"></ComponentCard>
            <ComponentCard Text="@Localizer["FullScreenText"]" Image="FullScreen.jpg" Url="fullscreen"></ComponentCard>
            <ComponentCard Text="@Localizer["GoTopText"]" Image="GoTop.png" Url="go-top"></ComponentCard>
            <ComponentCard Text="@Localizer["LogoutText"]" Image="Logout.png" Url="logout"></ComponentCard>
            <ComponentCard Text="@Localizer["MenuText"]" Image="Menu.svg" Url="menu"></ComponentCard>
            <ComponentCard Text="@Localizer["NavText"]" Image="Space.svg" Url="navigation"></ComponentCard>
            <ComponentCard Text="@Localizer["PaginationText"]" Image="Pagination.svg" Url="pagination"></ComponentCard>
            <ComponentCard Text="@Localizer["StepsText"]" Image="Steps.svg" Url="steps"></ComponentCard>
            <ComponentCard Text="@Localizer["TabText"]" Image="Tabs.svg" Url="tab"></ComponentCard>
        </ComponentCategory>

        <ComponentCategory Text="@Localizer["Text3"]">
            <ComponentCard Text="@Localizer["AutoCompleteText"]" Image="AutoComplete.svg" Url="auto-complete"></ComponentCard>
            <ComponentCard Text="@Localizer["AutoFillText"]" Image="AutoFill.jpg" Url="auto-fill"></ComponentCard>
            <ComponentCard Text="@Localizer["ButtonText"]" Image="Button.svg" Url="button"></ComponentCard>
            <ComponentCard Text="@Localizer["CascaderText"]" Image="Cascader.png" Url="cascader"></ComponentCard>
            <ComponentCard Text="@Localizer["CheckboxText"]" Image="CheckBox.svg" Url="checkbox"></ComponentCard>
            <ComponentCard Text="@Localizer["CheckboxListText"]" Image="CheckboxList.png" Url="checkbox-list"></ComponentCard>
            <ComponentCard Text="@Localizer["ColorPickerText"]" Image="ColorPicker.jpg" Url="color-picker"></ComponentCard>
            <ComponentCard Text="@Localizer["DateTimePickerText"]" Image="DatePicker.svg" Url="datetime-picker"></ComponentCard>
            <ComponentCard Text="@Localizer["DateTimeRangeText"]" Image="DateTimeRange.png" Url="datetime-range"></ComponentCard>
            <ComponentCard Text="@Localizer["EditorText"]" Image="Editor.png" Url="editor"></ComponentCard>
            <ComponentCard Text="@Localizer["EditorFormText"]" Image="EditorForm.png" Url="editor-form"></ComponentCard>
            <ComponentCard Text="@Localizer["FloatingLabelText"]" Image="FloatingLabel.jpg" Url="floating-label"></ComponentCard>
            <ComponentCard Text="@Localizer["InputText"]" Image="Input.svg" Url="input"></ComponentCard>
            <ComponentCard Text="@Localizer["InputNumberText"]" Image="InputNumber.png" Url="input-number"></ComponentCard>
            <ComponentCard Text="@Localizer["InputGroupText"]" Image="InputGroup.png" Url="input-group"></ComponentCard>
            <ComponentCard Text="@Localizer["MarkdownText"]" Image="Markdown.png" Url="markdown"></ComponentCard>
            <ComponentCard Text="@Localizer["MultiSelectText"]" Image="MultiSelect.png" Url="multi-select"></ComponentCard>
            <ComponentCard Text="@Localizer["OnScreenKeyboardText"]" Image="OnScreenKeyboard.png" Url="onscreen-keyboard"></ComponentCard>
            <ComponentCard Text="@Localizer["RadioText"]" Image="Radio.svg" Url="radio"></ComponentCard>
            <ComponentCard Text="@Localizer["RateText"]" Image="Rate.jpg" Url="rate"></ComponentCard>
            <ComponentCard Text="@Localizer["SelectText"]" Image="Select.svg" Url="select"></ComponentCard>
            <ComponentCard Text="@Localizer["SliderText"]" Image="Slider.svg" Url="slider"></ComponentCard>
            <ComponentCard Text="@Localizer["SwitchText"]" Image="Switch.svg" Url="switch"></ComponentCard>
            <ComponentCard Text="@Localizer["TextareaText"]" Image="Textarea.png" Url="textarea"></ComponentCard>
            <ComponentCard Text="@Localizer["ToggleText"]" Image="Toggle.png" Url="toggle"></ComponentCard>
            <ComponentCard Text="@Localizer["TransferText"]" Image="Transfer.svg" Url="transfer"></ComponentCard>
            <ComponentCard Text="@Localizer["UploadText"]" Image="Upload.svg" Url="upload"></ComponentCard>
            <ComponentCard Text="@Localizer["ValidateFormText"]" Image="ValidateForm.png" Url="validate-form"></ComponentCard>
        </ComponentCategory>

        <ComponentCategory Text="@Localizer["Text4"]">
            <ComponentCard Text="@Localizer["AvatarText"]" Image="Avatar.svg" Url="avatar"></ComponentCard>
            <ComponentCard Text="@Localizer["BadgeText"]" Image="Badge.svg" Url="badge"></ComponentCard>
            <ComponentCard Text="@Localizer["BarcodeReaderText"]" Image="BarcodeReader.png" Url="barcode-reader"></ComponentCard>
            <ComponentCard Text="@Localizer["BlockText"]" Image="Block.jpg" Url="block"></ComponentCard>
            <ComponentCard Text="@Localizer["BluetoothText"]" Image="Bluetooth.jpg" Url="blue-tooth"></ComponentCard>
            <ComponentCard Text="@Localizer["CardText"]" Image="Card.svg" Url="card"></ComponentCard>
            <ComponentCard Text="@Localizer["CalendarText"]" Image="Calendar.svg" Url="calendar"></ComponentCard>
            <ComponentCard Text="@Localizer["CameraText"]" Image="Camera.png" Url="Camera"></ComponentCard>
            <ComponentCard Text="@Localizer["CaptchaText"]" Image="Captcha.png" Url="captcha"></ComponentCard>
            <ComponentCard Text="@Localizer["CarouselText"]" Image="Carousel.svg" Url="carousel"></ComponentCard>
            <ComponentCard Text="@Localizer["ClientText"]" Image="Client.jpg" Url="client"></ComponentCard>
            <ComponentCard Text="@Localizer["CircleText"]" Image="Circle.png" Url="circle"></ComponentCard>
            <ComponentCard Text="@Localizer["CollapseText"]" Image="Collapse.svg" Url="collapse"></ComponentCard>
            <ComponentCard Text="@Localizer["DisplayText"]" Image="Display.jpg" Url="display"></ComponentCard>
            <ComponentCard Text="@Localizer["DownloadText"]" Image="Download.png" Url="download"></ComponentCard>
            <ComponentCard Text="@Localizer["DropdownWidgetText"]" Image="DropdownWidget.png" Url="dropdown-widget"></ComponentCard>
            <ComponentCard Text="@Localizer["EmptyText"]" Image="Empty.jpg" Url="empty"></ComponentCard>
            <ComponentCard Text="@Localizer["FileViewerText"]" Image="FileViewer.jpg" Url="file-viewer"></ComponentCard>
            <ComponentCard Text="@Localizer["GeolocationText"]" Image="Geolocation.jpg" Url="geolocation"></ComponentCard>
            <ComponentCard Text="@Localizer["GroupBoxText"]" Image="GroupBox.png" Url="group-box"></ComponentCard>
            <ComponentCard Text="@Localizer["HandwrittenPageText"]" Image="Handwritten.jpg" Url="handwritten"></ComponentCard>
            <ComponentCard Text="@Localizer["IpText"]" Image="IP.jpg" Url="ips"></ComponentCard>
            <ComponentCard Text="@Localizer["LinkButtonText"]" Image="LinkButton.png" Url="link-button"></ComponentCard>
            <ComponentCard Text="@Localizer["ListViewText"]" Image="ListView.png" Url="list-view"></ComponentCard>
            <ComponentCard Text="@Localizer["LocatorText"]" Image="Locator.jpg" Url="locator"></ComponentCard>
            <ComponentCard Text="@Localizer["ImageViewerText"]" Image="Image.png" Url="image-viewer"></ComponentCard>
            <ComponentCard Text="@Localizer["MindMapText"]" Image="MindMap.jpg" Url="mind-map"></ComponentCard>
            <ComponentCard Text="@Localizer["PdfReaderText"]" Image="PdfReader.jpg" Url="PdfReader"></ComponentCard>
            <ComponentCard Text="@Localizer["PrintText"]" Image="Print.jpg" Url="print"></ComponentCard>
            <ComponentCard Text="@Localizer["QRCodeText"]" Image="QRCode.png" Url="qr-code"></ComponentCard>
            <ComponentCard Text="@Localizer["RecognizerText"]" Image="Recognizer.png" Url="recognizer"></ComponentCard>
            <ComponentCard Text="@Localizer["SearchText"]" Image="Search.png" Url="search"></ComponentCard>
            <ComponentCard Text="@Localizer["SignaturePadText"]" Image="SignaturePad.png" Url="signature-pad"></ComponentCard>
            <ComponentCard Text="@Localizer["SpeechWaveText"]" Image="SpeechWave.png" Url="speech-wave"></ComponentCard>
            <ComponentCard Text="@Localizer["SwitchButtonText"]" Image="LinkButton.png" Url="switch-button"></ComponentCard>
            <ComponentCard Text="@Localizer["TableText"]" Image="Table.svg" Url="table"></ComponentCard>
            <ComponentCard Text="@Localizer["TagText"]" Image="Tag.svg" Url="tag"></ComponentCard>
            <ComponentCard Text="@Localizer["TimelineText"]" Image="Timeline.svg" Url="timeline"></ComponentCard>
            <ComponentCard Text="@Localizer["TitleText"]" Image="Title.jpg" Url="title"></ComponentCard>
            <ComponentCard Text="@Localizer["TreeText"]" Image="Tree.svg" Url="tree"></ComponentCard>
            <ComponentCard Text="@Localizer["TreeViewText"]" Image="Tree.svg" Url="tree-view"></ComponentCard>
            <ComponentCard Text="@Localizer["TransitionText"]" Image="Transition.jpg" Url="transition"></ComponentCard>
            <ComponentCard Text="@Localizer["VideoPlayerText"]" Image="VideoPlayer.jpg" Url="video-player"></ComponentCard>
            <ComponentCard Text="@Localizer["FileViewerText"]" Image="FileViewer.jpg" Url="file-viewer"></ComponentCard>
            <ComponentCard Text="@Localizer["WebSerialText"]" Image="WebSerial.jpg" Url="web-serial"></ComponentCard>
            <ComponentCard Text="@Localizer["WebSpeechText"]" Image="WebSpeech.jpg" Url="web-speech"></ComponentCard>
        </ComponentCategory>

        <ComponentCategory Text="@Localizer["Text6"]">
            <ComponentCard Text="@Localizer["ChartSummaryText"]" Image="Chart.png" Url="chart/index"></ComponentCard>
            <ComponentCard Text="@Localizer["ChartLineText"]" Image="Line.jpg" Url="chart/line"></ComponentCard>
            <ComponentCard Text="@Localizer["ChartBarText"]" Image="Bar.jpg" Url="chart/bar"></ComponentCard>
            <ComponentCard Text="@Localizer["ChartPieText"]" Image="Pie.jpg" Url="chart/pie"></ComponentCard>
            <ComponentCard Text="@Localizer["ChartDoughnutText"]" Image="Doughnut.jpg" Url="chart/doughnut"></ComponentCard>
            <ComponentCard Text="@Localizer["ChartBubbleText"]" Image="Bubble.jpg" Url="chart/bubble"></ComponentCard>
        </ComponentCategory>

        <ComponentCategory Text="@Localizer["Text5"]">
            <ComponentCard Text="@Localizer["AlertText"]" Image="Alert.svg" Url="alert"></ComponentCard>
            <ComponentCard Text="@Localizer["ConsoleText"]" Image="Console.png" Url="console"></ComponentCard>
            <ComponentCard Text="@Localizer["DialogText"]" Image="Notification.svg" Url="dialog"></ComponentCard>
            <ComponentCard Text="@Localizer["DispatchText"]" Image="Dispatch.jpg" Url="dispatch"></ComponentCard>
            <ComponentCard Text="@Localizer["DrawerText"]" Image="Drawer.svg" Url="drawer"></ComponentCard>
            <ComponentCard Text="@Localizer["EditDialogText"]" Image="Notification.svg" Url="edit-dialog"></ComponentCard>
            <ComponentCard Text="@Localizer["LightText"]" Image="Light.png" Url="light"></ComponentCard>
            <ComponentCard Text="@Localizer["MessageText"]" Image="Message.svg" Url="message"></ComponentCard>
            <ComponentCard Text="@Localizer["ModalText"]" Image="Modal.svg" Url="modal"></ComponentCard>
            <ComponentCard Text="@Localizer["NotificationsText"]" Image="Notifications.jpg" Url="notification"></ComponentCard>
            <ComponentCard Text="@Localizer["PopoverConfirmText"]" Image="Pop-confirm.svg" Url="pop-confirm"></ComponentCard>
            <ComponentCard Text="@Localizer["PopoverText"]" Image="Popover.svg" Url="popover"></ComponentCard>
            <ComponentCard Text="@Localizer["ProgressText"]" Image="Progress.svg" Url="progress"></ComponentCard>
            <ComponentCard Text="@Localizer["ReconnectorText"]" Image="Reconnector.png" Url="reconnector"></ComponentCard>
            <ComponentCard Text="@Localizer["ResponsiveText"]" Image="Responsive.png" Url="responsive"></ComponentCard>
            <ComponentCard Text="@Localizer["SearchDialogText"]" Image="SearchDialog.png" Url="search-dialog"></ComponentCard>
            <ComponentCard Text="@Localizer["SpinnerText"]" Image="Spinner.gif" Url="spinner"></ComponentCard>
            <ComponentCard Text="@Localizer["SweetAlertText"]" Image="SweetAlert.png" Url="sweet-alert"></ComponentCard>
            <ComponentCard Text="@Localizer["TimerText"]" Image="Timer.png" Url="timer"></ComponentCard>
            <ComponentCard Text="@Localizer["ToastText"]" Image="Toast.png" Url="toast"></ComponentCard>
            <ComponentCard Text="@Localizer["TooltipText"]" Image="Tooltip.svg" Url="tooltip"></ComponentCard>
        </ComponentCategory>

    </CascadingValue>
</CascadingValue>
